<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            background-color: pink;
            border: 2px solid black;
            outline-color: rgb(223, 92, 177);
            box-shadow: 10px 5px 5px 0 pink;
        }
        .tb{
            width: 300px;
            height: 260px;
            background-image: url(./6.jpg);
            transition: box-shadow 0.5s;
            margin-top: 30px;
            margin-left: 30px;
        }
        .tb:hover{
box-shadow: 5px 5px 5px skyblue,5px -5px 5px skyblue,-5px 5px 5px skyblue;
        }
        .bag{
            width: 300px;
            height: 260px;
            background-image: url(./7.jpg);
            transition: all 1s;
        }
        .bag:hover{
            border-radius: 50%;
        }
        a{
            text-decoration: none;
            display: block;
            color: black;
        }
        .bl{
            width: 280px;
            height: 200px;
            position: relative;
        }
        .bl img{
            width: 280px;
            height: 200px;
        }
        .push{
            opacity: 0;
            position: absolute;
            width: 50px;
            height: 50px;
            background: url(http://codelover.club/coursefiles/FqBixArJ6S60bWwN5hr3qRJMciYl.png);
            right: 10px;
            bottom: 10px;
            transition: all ease-in-out 1s;
        }
        .bl:hover .push{
        opacity: 1;
        }
        .mask{
            width: 280px;
            height: 0;
            position: absolute;
            background-color: rgb(118, 79, 137);
            color: white;
            overflow: hidden;
            opacity: 0.5;
            transition: height 1s ease-in-out 1s;
            bottom: 0;
        }
        .bl:hover .mask{
            height: 100%;
        }
    </style>
</head>
<body>
    <h3>焦点</h3>
    用户号码：<input type="text">
    <br><br>
    验证码：<input type="text">
    <h3>悬停</h3>
    <div class="tb"></div>
    <div class="bag"></div>
    <h3>bilibili</h3>
    <div class="bl">
        <a href="#">
            <img src="http://codelover.club/coursefiles/Fh2scaNFdGi6d13919IqYs0SvEiZ.jpg" alt="">
        </a>
        <a href="#" class="push"></a>
        <a href="#" class="mask">
            <h3>这是什么</h3>
            <p>这是艺术是灵感是什么都行</p>
        </a>
    </div>
</body>
</html>